<template>
    <div>
        <div v-for="(item, index) in permission" :key="index">
            <div v-if="item.children&&!item.meta.hidden">
                <el-submenu :index="'/'+item.path">
                    <template slot="title">
                        <i :class="item.meta.icon?item.meta.icon:'el-icon-trophy'"></i>
                        <span>{{item.meta.title?item.meta.title:item.name}}</span>
                    </template>
                    <menu-item :permission="item.children" :num="num+'-'+index"></menu-item>
                </el-submenu>
            </div>
            <div v-else-if="!item.meta.hidden">
                <router-link :to="item.path"><el-menu-item :index="'/'+item.path">{{item.meta.title?item.meta.title:item.name}}</el-menu-item></router-link>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:'MenuItem',
        props:{
            permission:{},
            num:{}
        },
        data(){
            return{

            }
        },
        methods:{
            aa(){
                this.$route.path
            },
        },
        mounted() {
            console.log(this.permission)
            console.log(this.num)

        }
    }
</script>
<style>

</style>
